一文带你入门Arco Design，快速构建一个Arco项目Demo

您所在的位置：网站首页 › capital design 教程 › 一文带你入门Arco Design，快速构建一个Arco项目Demo

一文带你入门Arco Design，快速构建一个Arco项目Demo

2023-10-23 05:55| 来源: 网络整理| 查看: 265

一文带你入门Arco Design，快速构建一个Arco项目Demo 1.项目创建2.项目运行3.目录结构

1.项目创建

确保你的机器中有Node.js和Git环境，如果没有，参考如下文章：

Node.js安装及环境配置

Git安装配置教程

开始开发之前，请确认本地环境中安装好了 node， git 和 arco cli

其中 arco cli 是安装项目模版的工具，请运行以下命令安装：

npm i -g arco-cli

在某一个文件夹下运行Shell，运行如下命令新建项目：

arco init klza(这个是你的项目名字)

在这里插入图片描述

选择技术栈：

? 请选择你希望使用的技术栈 React ❯ Vue

选择 arco-design-pro 分类：

? 请选择一个分类业务组件组件库 Lerna Menorepo 项目 ❯ Arco Pro 项目

在这里插入图片描述

等待安装依赖。。。

看到以下输出就是创建成功了

在这里插入图片描述

2.项目运行

进入到项目中，运行代码：

cd klza npm run dev

在这里插入图片描述

访问地址，运行成功！

在这里插入图片描述

可以看到，完整的模板是一个中台管理系统样例：

在这里插入图片描述

3.目录结构 ├── README.md ├── package.json ├── index.html ├── src │ ├── api # 请求接口 │ ├── assets # 静态资源 │ └── style 全局样式 │ ├── components # 通用业务组件 │ ├── config # 全局配置(包含echarts主题) │ └── settings.json # 配置文件 │ ├── directives # 指令集（如需，可自行补充） │ ├── filters # 过滤器（如需，可自行补充） │ ├── hooks # 全局hooks │ ├── layout # 布局 │ ├── locale # 国际化语言包 │ ├── mock # 模拟数据 │ ├── views # 页面模板 │ ├── router # 路由配置 │ ├── store # 状态管理中心 │ ├── types # Typescript 类型 │ └── utils # 工具库 │ └── App.vue # 视图入口 │ └── main.ts # 入口文件 └── tsconfig.json

【本文地址】

一文带你入门Arco Design，快速构建一个Arco项目Demo

一文带你入门Arco Design，快速构建一个Arco项目Demo

今日新闻

推荐新闻